<template>
  <div class="dy-main mystructuration">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">我的结构化</x-header>
    </div>
    <div class="dy-body">
      <div class="productDetailBox">
        <!-- <h3>{{financialData.name}}</h3> -->
        <div><p class="benefit caption">99,999,333.00</p></div>
        <div><p class="benefit">总资产（元）</p></div>
      </div>
      <div class="scroll-container">
        <scroller lock-x scrollbar-y use-pullup :pullup-config="{ content: '上拉加载更多', downContent: '松开进行加载', upContent: '上拉加载更多', loadingContent: '加载中...' }" height="100%" ref="demo3" @on-pullup-loading="getMore" >
          <div class="scroll-box">
            <ul class="tran-detail-item">
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
              <li>
                <group gutter="0">
                  <div class="list">
                    <div class="list-item">
                      <h4>东亚联丰环球债券</h4>
                      <span>还剩14天</span>
                    </div>
                    <div class="list-item">
                      <p>持有股份</p>
                      <p>523.00</p>
                    </div>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      financialData: {
        name: '', // 理财产品名
        rate: '', // 年化收益率
        profit: '', // 年化收益额
        term: '', // 投资期限
        availableCredit: '', // 剩余额度
        totalAmountOfPurchase: '', // 可购总额度
        remainingTime: '', // 还剩xx天购买
        openSaleDate: '', // 开售日
        cutOffDate: '', // 截止日
        interestDate: '', // 起息日
        dueDate: '', // 到期日
        list: {
          subTime: '', // 认购期
          productName: '', // 产品名称
          productType: '', // 产品类型
          currency: '', // 计价币种
          deliveryTime: '', // 产品交收日期
          expireTime: '', // 产品到期日期
          minBuyMoney: '', // 最低购买金额
          increaseMoney: '', // 递增金额
          saveBook: '', // 是否保本
          RiskGrade: '' // 风险等级
        }},
      buttonTxt: '购买' // 判断获得： 1.购买；2.去开户
    }
  },
  methods: {
    getFinancialData () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'showProDetail', 'user_Data': {'productId': '3015'}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.financialData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    },
    getMore () {
    },
    dataLists () {
    },
    gotoNext () {
      this.$router.push({name: 'FinancialShift'})
    }
  },
  created () {
  // this.getFinancialData()
  }
}
</script>
<style lang="less">
.mystructuration{
  .dy-header{
  }
  .dy-body{
    .productDetailBox {
      position: absolute;
      top: .88rem;
      left: 0;
      width: 100%;
      height: 1.64rem;
      padding:.2rem;
      background-color: #3d477b;
      color: #fff;
      h3 {
        padding: .3rem .3rem 0;
        height: .6rem;
        font-size: .28rem;
      }
      .benefit{
        text-align: center;
      }
      .caption{
        font-size: .5rem;
      }
    }
    .scroll-container {
      width:100%;
      height: 100%;
      padding-top: 1.64rem;
      .scroll-box {
        width:100%;
        height: 100%;
        .list{
          width: 100%;
          padding: .3rem;
          .list-item{
            display: flex;
            justify-content:space-between;
            align-items: center;
            width: 100%;
            height: .44rem;
            line-height: .44rem;
            h4{
              font-size: .28rem;
            }
            span{
              font-size: .18rem;
            }
            p:first-child{
              padding-left: .2rem;
            }
          }
        }
      }
    }
  }
}
</style>
